<template>
	<div class="total-container">
		<!-- 顶部导航 -->
		<header class="top-header">
			<div class="header-content">
				<div class="header-left">
					<div class="logo-container">
						<span class="iconify text-4xl text-blue-600" data-icon="ph:trophy"></span>
						<h1 class="site-title">校园运动会赛事平台</h1>
						<!-- 登录按钮 -->
						<button class="login-btn" @click="goToLogin">
							<iconify-icon icon="mdi:login" width="20" height="20"></iconify-icon>
							<span>登录</span>
						</button>
					</div>
				</div>
				<div class="header-right">
					<div class="header-info">
						<span class="current-time">{{ currentTime }}</span>
						<span class="weather-info">晴 26°C</span>
					</div>
				</div>
			</div>
		</header>

		<!-- 主要内容区 -->
		<main class="main-content">
			<!-- 左侧区域 -->
			<div class="left-section">
				<!-- 赛事统计卡片 -->
				<div class="stats-cards">
					<div class="stat-card primary">
						<div class="stat-icon">
							<iconify-icon icon="mdi:calendar-today" width="32" height="32"></iconify-icon>
						</div>
						<div class="stat-content">
							<div class="stat-number">15</div>
							<div class="stat-label">今日赛事</div>
						</div>
					</div>
					<div class="stat-card success">
						<div class="stat-icon">
							<iconify-icon icon="mdi:account-group" width="32" height="32"></iconify-icon>
						</div>
						<div class="stat-content">
							<div class="stat-number">1,234</div>
							<div class="stat-label">参赛人数</div>
						</div>
					</div>
					<div class="stat-card warning">
						<div class="stat-icon">
							<iconify-icon icon="mdi:trophy" width="32" height="32"></iconify-icon>
						</div>
						<div class="stat-content">
							<div class="stat-number">45</div>
							<div class="stat-label">比赛项目</div>
						</div>
					</div>
					<div class="stat-card info">
						<div class="stat-icon">
							<iconify-icon icon="mdi:whistle" width="32" height="32"></iconify-icon>
						</div>
						<div class="stat-content">
							<div class="stat-number">78</div>
							<div class="stat-label">裁判人数</div>
						</div>
					</div>
				</div>

				<!-- 赛事亮点 -->
				<div class="section-card">
					<h2 class="section-title">
						<iconify-icon icon="mdi:star" width="24" height="24"></iconify-icon>
						赛事亮点
					</h2>
					<div class="highlights-grid">
						<div class="highlight-item" v-for="(highlight, index) in highlights" :key="index">
							<div class="highlight-media">
								<img :src="highlight.image" :alt="highlight.title">
								<div class="highlight-overlay">
									<iconify-icon icon="mdi:play-circle" width="48" height="48"></iconify-icon>
								</div>
							</div>
							<div class="highlight-content">
								<h3>{{ highlight.title }}</h3>
								<p>{{ highlight.description }}</p>
								<div class="highlight-meta">
									<span class="highlight-time">{{ highlight.time }}</span>
									<span class="highlight-views">{{ highlight.views }}次观看</span>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 实时战报 -->
				<div class="section-card">
					<h2 class="section-title">
						<iconify-icon icon="mdi:flash" width="24" height="24"></iconify-icon>
						实时战报
					</h2>
					<div class="live-updates">
						<div class="live-item" v-for="(update, index) in liveUpdates" :key="index">
							<div class="live-indicator">
								<span class="live-dot"></span>
								<span class="live-time">{{ update.time }}</span>
							</div>
							<div class="live-content">
								<h4>{{ update.event }}</h4>
								<p>{{ update.description }}</p>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 右侧区域 -->
			<div class="right-section">
				<!-- 通知公告 -->
				<div class="section-card">
					<h2 class="section-title">
						<iconify-icon icon="mdi:bell" width="24" height="24"></iconify-icon>
						通知公告
					</h2>
					<div class="notice-container">
						<div class="announcement-item" v-for="(item, index) in announcementList" :key="index">
							<div class="announcement-header">
								<h3>{{ item.title }}</h3>
								<span class="announcement-time">{{ item.time }}</span>
							</div>
							<p class="announcement-content">{{ item.content }}</p>
						</div>
					</div>
				</div>

				<!-- 实时赛事播报 -->
				<div class="section-card">
					<h2 class="section-title">
						<iconify-icon icon="mdi: broadcast" width="24" height="24"></iconify-icon>
						实时赛事播报
						<div class="live-indicator">
							<span class="live-dot"></span>
							<span class="live-text">LIVE</span>
						</div>
					</h2>
					<div class="live-content">
						<div class="countdown-display">
							<h3>{{ currentTime }}</h3>
						</div>
						<div class="marquee-container">
							<div class="marquee-content">
								<span class="marquee-item">🏃 男子100米决赛正在进行中，目前张三暂时领先！</span>
								<span class="marquee-item">🏅 女子跳高预赛将在10分钟后开始，请参赛选手做好准备</span>
								<span class="marquee-item">🎉 刚刚结束的男子铅球比赛中，李四以12.5米成绩打破校记录！</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 赛事日程表 -->
				<div class="section-card">
					<h2 class="section-title">
						<iconify-icon icon="mdi:calendar-clock" width="24" height="24"></iconify-icon>
						今日赛事
					</h2>
					<div class="schedule-list">
						<div
							class="schedule-item"
							v-for="(item, index) in scheduleList"
							:key="index"
							:class="getScheduleClass(item.status)"
						>
							<div class="schedule-header">
								<div class="schedule-info">
									<h3>{{ item.name }}</h3>
									<p>{{ item.place }} | {{ item.time }}</p>
								</div>
								<span class="status-badge" :class="getStatusBadgeClass(item.status)">
									{{ item.statusText }}
								</span>
							</div>

							<div v-if="item.expanded" class="schedule-details">
								<div class="detail-grid">
									<div class="detail-item">
										<span class="detail-label">参赛人数：</span>
										<span>{{ item.participantNum }}</span>
									</div>
									<div class="detail-item">
										<span class="detail-label">比赛规则：</span>
										<span>{{ item.rules }}</span>
									</div>
									<div class="detail-item">
										<span class="detail-label">裁判员：</span>
										<span>{{ item.referee }}</span>
									</div>
									<div class="detail-item">
										<span class="detail-label">注意事项：</span>
										<span>{{ item.notes }}</span>
									</div>
								</div>
								<div class="detail-description">
									<span class="detail-label">详细描述：</span>
									<p>{{ item.description }}</p>
								</div>
							</div>

							<div class="schedule-footer">
								<span class="participant-info">{{ item.participantNum }}</span>
								<button class="detail-toggle" @click="toggleDetails(item)">
									{{ item.expanded ? '收起详情' : '查看详情' }}
								</button>
							</div>
						</div>
					</div>
				</div>

				<!-- 精彩瞬间 -->
				<div class="section-card">
					<h2 class="section-title">
						<iconify-icon icon="mdi:image-multiple" width="24" height="24"></iconify-icon>
						精彩瞬间
					</h2>
					<div class="gallery-grid">
						<div v-for="(moment, index) in wonderfulMoments" :key="index" class="gallery-item">
							<div class="image-container">
								<img :src="moment.imgUrl" :alt="moment.altText" class="gallery-image">
								<div class="image-overlay">
									<iconify-icon icon="mdi:magnify" width="24" height="24"></iconify-icon>
								</div>
							</div>
							<p class="image-caption">{{ moment.desc }}</p>
						</div>
					</div>
				</div>
			</div>
		</main>

		<!-- 底部信息区 - 保持原样 -->
		<footer class="bg-orange-500 text-white py-8 px-8 mt-12">
			<div class="flex flex-col md:flex-row justify-between items-start md:items-center">
				<div>
					<h2 class="text-lg font-bold mb-4">校园运动会组委会</h2>
					<p class="mb-2">地址：重庆工程学院双桥校区</p>
					<p class="mb-2">电话：021-12345678</p>
					<p>邮箱：sports@university.edu</p>
				</div>
			</div>
			<div class="mt-8 pt-4 border-t border-orange-400 text-center text-white">
				<p>© 2025 校园运动会组委会 | 版权所有</p>
			</div>
		</footer>
	</div>
</template>

<script>
	export default {
		name: 'TotalPage',
		data() {
			return {
				// 新增数据
				highlights: [
					{
						title: '男子100米决赛精彩瞬间',
						description: '张三以10.45秒的成绩打破校记录',
						image: 'img/dhl.jpg',
						time: '10分钟前',
						views: 1256
					},
					{
						title: '女子跳高比赛集锦',
						description: '李四成功挑战1.75米高度',
						image: 'img/tg.webp',
						time: '30分钟前',
						views: 892
					},
					{
						title: '接力赛交接失误分析',
						description: '技术教练解析交接棒技巧',
						image: 'img/jls.webp',
						time: '1小时前',
						views: 2341
					}
				],
				liveUpdates: [
					{
						time: '14:30',
						event: '男子100米决赛',
						description: '张三以10.45秒打破校记录，获得冠军！'
					},
					{
						time: '14:25',
						event: '女子跳高决赛',
						description: '王五成功挑战1.75米，暂列第一'
					},
					{
						time: '14:20',
						event: '4×100米接力预赛',
						description: '计算机学院以42.3秒晋级决赛'
					}
				],
				// 1. 通知公告数据 - 保持原样
				announcementList: [{
						title: '重要通知',
						time: '10:30',
						content: '因天气原因，原定下午3点举行的跳远比赛调整至明天上午10点'
					},
					{
						title: '赛事公布',
						time: '09:45',
						content: '女子铅球比赛结果已公布，请前往成绩查询处查看'
					},
					{
						title: '赛事提醒',
						time: '09:15',
						content: '请参赛选手提前30分钟到检录处报到，携带学生证'
					},
					{
						title: '规则变更',
						time: '昨天',
						content: '4×100米接力比赛规则更新，详见赛事规则页面'
					},
					{
						title: '新增项目',
						time: '昨天',
						content: '新增师生混合接力赛，接受现场报名'
					}
				],
				// 2. 赛事日程数据 - 保持原样
				scheduleList: [{
						name: '男子100米决赛',
						place: '田径场',
						time: '上午09:30',
						status: '进行中',
						statusText: '进行中',
						participantNum: '12人参赛',
						buttonText: '查看详情',
						expanded: false,
						rules: '个人赛，每人一次机会，取最好成绩',
						referee: '王裁判',
						notes: '请提前30分钟到场热身',
						description: '男子100米短跑决赛，参赛选手均为各院系预赛前两名。'
					},
					{
						name: '女子跳高预赛',
						place: '田径场',
						time: '上午10:15',
						status: '即将开始',
						statusText: '即将开始',
						participantNum: '8人参赛',
						buttonText: '查看详情',
						expanded: false,
						rules: '三次试跳机会，取最好成绩',
						referee: '李裁判',
						notes: '请穿着运动鞋，自备毛巾',
						description: '女子跳高预赛，高度从1.2米开始逐步提升。'
					},
					{
						name: '4×100米接力预赛',
						place: '田径场',
						time: '下午14:00',
						status: '即将开始',
						statusText: '即将开始',
						participantNum: '6队参赛',
						buttonText: '查看详情',
						expanded: false,
						rules: '团队赛，四人接力，交接棒必须在20米区域内完成',
						referee: '张裁判',
						notes: '各队需统一服装，提前确认棒次顺序',
						description: '4×100米接力预赛，各院系代表队参加，前两名进入决赛。'
					},
					{
						name: '男子铅球决赛',
						place: '田径场',
						time: '下午15:45',
						status: '已完成',
						statusText: '已完成',
						participantNum: '10人参赛',
						buttonText: '查看结果',
						expanded: false,
						rules: '三次投掷机会，取最好成绩',
						referee: '赵裁判',
						notes: '铅球重量7.26公斤，注意安全距离',
						description: '男子铅球决赛已结束，李四同学以12.5米成绩获得冠军。'
					}
				],
				// 3. 实时时间相关
				currentTime: '',
				timeInterval: null,

				// 5. 精彩瞬间数据 - 保持原样
				wonderfulMoments: [{
						imgUrl: 'img/tg.webp',
						altText: 'Athlete jumping over hurdle',
						desc: '跳远选手破纪录瞬间'
					},
					{
						imgUrl: 'img/bh.webp',
						altText: 'Sprinters racing on track',
						desc: '拔河大战'
					},
					{
						imgUrl: 'img/jls.webp',
						altText: 'Relay team passing baton',
						desc: '接力赛交接棒瞬间'
					}
				],
				};
		},
		mounted() {
			// 1. 初始化实时时间
			this.updateTime();
			this.timeInterval = setInterval(() => this.updateTime(), 1000);

			// 2. 初始化ECharts图表
			this.initECharts();

			// 初始化处理
			this.initPage();
			window.addEventListener('resize', this.handleResize);
		},
		beforeUnmount() {
			clearInterval(this.timeInterval);
			window.removeEventListener('resize', this.handleResize);
		},
		methods: {
			// 跳转到登录页面
			goToLogin() {
				this.$router.push('/login');
			},
			// 切换详情展开/收起
			toggleDetails(item) {
				item.expanded = !item.expanded;
			},
			// 获取赛事项样式类
			getScheduleClass(status) {
				const classMap = {
					'进行中': 'schedule-live',
					'即将开始': 'schedule-upcoming',
					'已完成': 'schedule-completed'
				};
				return classMap[status] || '';
			},
			// 获取状态徽章样式类
			getStatusBadgeClass(status) {
				const classMap = {
					'进行中': 'badge-live',
					'即将开始': 'badge-upcoming',
					'已完成': 'badge-completed'
				};
				return classMap[status] || '';
			},

			updateTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');

				this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

				const clockElement = document.getElementById('clock');
				if (clockElement) {
					clockElement.textContent = this.currentTime;
				}
			},

			initECharts() {
				// ECharts初始化逻辑
			},

			initPage() {
				// 初始化页面，桌面端专用
				console.log('桌面端页面初始化');
			},

			handleResize() {
				// 处理窗口大小变化，仅桌面端优化
				console.log('窗口大小调整');
			}
		}
	};
</script>

<style scoped>
	/* 主容器 */
	.total-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
	}

	/* 顶部导航 */
	.top-header {
		background: white;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.header-content {
		max-width: 1400px;
		margin: 0 auto;
		padding: 1rem 2rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.logo-container {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.site-title {
		font-size: 1.875rem;
		font-weight: 700;
		color: #1e40af;
		margin: 0;
	}

	/* 登录按钮样式 */
	.login-btn {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 10px 20px;
		background: linear-gradient(45deg, #667eea, #764ba2);
		color: white;
		border: none;
		border-radius: 8px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s ease;
		margin-left: 30px;
		box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
	}

	.login-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
		background: linear-gradient(45deg, #5a7fdb, #6a4190);
	}

	.login-btn:active {
		transform: translateY(0);
		box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
	}

	.header-info {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		color: #64748b;
		font-size: 0.875rem;
	}

	.current-time {
		font-weight: 500;
	}

	.weather-info {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	/* 主要内容区 */
	.main-content {
		max-width: 1400px;
		margin: 0 auto;
		padding: 2rem;
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 2rem;
	}

	/* 左侧区域 */
	.left-section {
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}

	/* 统计卡片 */
	.stats-cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 1.5rem;
	}

	.stat-card {
		background: white;
		border-radius: 12px;
		padding: 1.5rem;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		gap: 1rem;
		transition: all 0.3s ease;
		cursor: pointer;
	}

	.stat-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	}

	.stat-card.primary {
		border-left: 4px solid #3b82f6;
	}

	.stat-card.success {
		border-left: 4px solid #10b981;
	}

	.stat-card.warning {
		border-left: 4px solid #f59e0b;
	}

	.stat-card.info {
		border-left: 4px solid #8b5cf6;
	}

	.stat-icon {
		width: 60px;
		height: 60px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(59, 130, 246, 0.1);
		color: #3b82f6;
	}

	.stat-card.success .stat-icon {
		background: rgba(16, 185, 129, 0.1);
		color: #10b981;
	}

	.stat-card.warning .stat-icon {
		background: rgba(245, 158, 11, 0.1);
		color: #f59e0b;
	}

	.stat-card.info .stat-icon {
		background: rgba(139, 92, 246, 0.1);
		color: #8b5cf6;
	}

	.stat-content {
		flex: 1;
	}

	.stat-number {
		font-size: 2rem;
		font-weight: 700;
		color: #1e293b;
		line-height: 1;
		margin-bottom: 0.25rem;
	}

	.stat-label {
		font-size: 0.875rem;
		color: #64748b;
		font-weight: 500;
	}

	/* 区域卡片 */
	.section-card {
		background: white;
		border-radius: 12px;
		padding: 1.5rem;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.section-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	}

	.section-title {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 1.25rem;
		font-weight: 600;
		color: #1e293b;
		margin-bottom: 1.5rem;
		padding-bottom: 0.75rem;
		border-bottom: 2px solid #f1f5f9;
	}

	/* 通知公告样式 */
	.notice-container {
		max-height: 300px;
		overflow-y: auto;
	}

	.notice-container::-webkit-scrollbar {
		width: 6px;
	}

	.notice-container::-webkit-scrollbar-thumb {
		background-color: #e5e7eb;
		border-radius: 3px;
	}

	.notice-container::-webkit-scrollbar-thumb:hover {
		background-color: #d1d5db;
	}

	.announcement-item {
		padding: 1rem 0;
		border-bottom: 1px solid #f3f4f6;
		transition: background-color 0.3s ease;
	}

	.announcement-item:hover {
		background-color: #f9fafb;
		margin: 0 -1rem;
		padding: 1rem;
	}

	.announcement-item:last-child {
		border-bottom: none;
	}

	.announcement-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.5rem;
	}

	.announcement-header h3 {
		font-size: 1rem;
		font-weight: 600;
		color: #374151;
		margin: 0;
	}

	.announcement-time {
		font-size: 0.875rem;
		color: #9ca3af;
	}

	.announcement-content {
		font-size: 0.875rem;
		color: #6b7280;
		line-height: 1.5;
		margin: 0;
	}

	/* 实时播报样式 */
	.live-indicator {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin-left: auto;
	}

	.live-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #ef4444;
		position: relative;
		animation: pulse 2s infinite;
	}

	.live-dot::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 16px;
		height: 16px;
		border-radius: 50%;
		border: 2px solid #ef4444;
		animation: ripple 2s infinite;
	}

	.live-text {
		font-size: 0.75rem;
		font-weight: 600;
		color: #ef4444;
	}

	.live-content {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.countdown-display {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
		border-radius: 8px;
		padding: 1rem;
		text-align: center;
	}

	.countdown-display h3 {
		font-size: 1.25rem;
		font-weight: 700;
		color: #3b82f6;
		margin: 0;
	}

	/* 赛程列表样式 */
	.schedule-list {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.schedule-item {
		border-left: 4px solid #e5e7eb;
		border-radius: 8px;
		padding: 1rem;
		background: #f9fafb;
		transition: all 0.3s ease;
	}

	.schedule-item:hover {
		background: #f3f4f6;
		transform: translateX(2px);
	}

	.schedule-item.schedule-live {
		border-left-color: #ef4444;
		background: rgba(239, 68, 68, 0.05);
	}

	.schedule-item.schedule-upcoming {
		border-left-color: #3b82f6;
		background: rgba(59, 130, 246, 0.05);
	}

	.schedule-item.schedule-completed {
		border-left-color: #10b981;
		background: rgba(16, 185, 129, 0.05);
	}

	.schedule-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 0.5rem;
	}

	.schedule-info h3 {
		font-size: 1rem;
		font-weight: 600;
		color: #1f2937;
		margin: 0 0 0.25rem 0;
	}

	.schedule-info p {
		font-size: 0.875rem;
		color: #6b7280;
		margin: 0;
	}

	.schedule-details {
		margin: 1rem 0;
		padding: 1rem;
		background: white;
		border-radius: 8px;
		border: 1px solid #e5e7eb;
	}

	.detail-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
		margin-bottom: 1rem;
	}

	.detail-item {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	.detail-label {
		font-size: 0.75rem;
		font-weight: 500;
		color: #6b7280;
	}

	.detail-description {
		font-size: 0.875rem;
	}

	.detail-description p {
		margin: 0.5rem 0 0 0;
		line-height: 1.5;
		color: #4b5563;
	}

	.schedule-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.participant-info {
		font-size: 0.75rem;
		color: #9ca3af;
	}

	.detail-toggle {
		background: none;
		border: none;
		color: #3b82f6;
		font-size: 0.875rem;
		font-weight: 500;
		cursor: pointer;
		transition: color 0.3s ease;
	}

	.detail-toggle:hover {
		color: #2563eb;
		text-decoration: underline;
	}

	/* 精彩瞬间样式优化 */
	.gallery-item {
		transition: transform 0.3s ease;
	}

	.gallery-item:hover {
		transform: translateY(-4px);
	}

	.image-container {
		position: relative;
		overflow: hidden;
		border-radius: 8px;
	}

	.image-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.image-container:hover .image-overlay {
		opacity: 1;
	}

	.image-caption {
		font-size: 0.875rem;
		color: #6b7280;
		text-align: center;
		margin: 0.5rem 0 0 0;
	}

	/* 赛事亮点 */
	.highlights-grid {
		display: grid;
		gap: 1.5rem;
	}

	.highlight-item {
		display: flex;
		gap: 1rem;
		padding: 1rem;
		border-radius: 8px;
		transition: all 0.3s ease;
		cursor: pointer;
	}

	.highlight-item:hover {
		background: #f8fafc;
	}

	.highlight-media {
		width: 120px;
		height: 80px;
		border-radius: 8px;
		overflow: hidden;
		position: relative;
		flex-shrink: 0;
	}

	.highlight-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.highlight-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.highlight-item:hover .highlight-overlay {
		opacity: 1;
	}

	.highlight-content {
		flex: 1;
	}

	.highlight-content h3 {
		font-size: 1rem;
		font-weight: 600;
		color: #1e293b;
		margin-bottom: 0.5rem;
		line-height: 1.4;
	}

	.highlight-content p {
		font-size: 0.875rem;
		color: #64748b;
		line-height: 1.5;
		margin-bottom: 0.75rem;
	}

	.highlight-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.75rem;
		color: #94a3b8;
	}

	/* 实时战报 */
	.live-updates {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.live-item {
		display: flex;
		gap: 1rem;
		padding: 1rem;
		border-radius: 8px;
		background: #f8fafc;
		transition: all 0.3s ease;
	}

	.live-item:hover {
		background: #f1f5f9;
	}

	.live-indicator {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		flex-shrink: 0;
	}

	.live-dot {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: #ef4444;
		position: relative;
		animation: pulse 2s infinite;
	}

	.live-dot::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 2px solid #ef4444;
		animation: ripple 2s infinite;
	}

	.live-time {
		font-size: 0.75rem;
		color: #64748b;
		font-weight: 500;
	}

	.live-content {
		flex: 1;
	}

	.live-content h4 {
		font-size: 1rem;
		font-weight: 600;
		color: #1e293b;
		margin-bottom: 0.5rem;
	}

	.live-content p {
		font-size: 0.875rem;
		color: #64748b;
		line-height: 1.5;
		margin: 0;
	}

	/* 右侧区域 */
	.right-section {
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}

	/* 动画效果 */
	@keyframes pulse {
		0%, 100% {
			opacity: 1;
		}
		50% {
			opacity: 0.7;
		}
	}

	@keyframes ripple {
		0% {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1);
		}
		100% {
			opacity: 0;
			transform: translate(-50%, -50%) scale(2);
		}
	}

	/* 桌面端布局优化 */
	.main-content {
		grid-template-columns: 2fr 1fr;
		padding: 2rem;
	}

	.stats-cards {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}

	.header-content {
		padding: 1rem 2rem;
	}

	/* 原有样式保持 */
	.announcement-item {
		padding: 1px 0;
		border-bottom: 4px solid #eee;
	}

	/* 底部信息区样式 */
	footer {
		background-color: #f97316;
		/* 橘色背景 */
		color: white;
		/* 白色文字 */
	}

	/* 底部边框颜色调整 */
	footer .border-t {
		border-color: rgba(255, 255, 255, 0.3);
		/* 白色半透明边框 */
	}

	/* 赛事日程表自适应网格布局 */
	.schedule-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 16px;
	}

	/* 精彩瞬间修复 - 只修改图片比例部分 */
	.gallery-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 16px;
	}

	.image-container {
		width: 100%;
		height: 200px;
		overflow: hidden;
		border-radius: 8px;
		background: #f5f5f5;
	}

	.gallery-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.gallery-item {
		transition: transform 0.3s ease;
	}

	.gallery-item:hover {
		transform: translateY(-5px);
	}

	/* 桌面端网格布局优化 */
	.schedule-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 16px;
	}

	.gallery-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 16px;
	}
</style>

<style>
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

	body {
		font-family: 'Noto Sans SC', sans-serif;
		color: #333;
		margin: 0;
		padding: 0;
	}

	.container {
		background-size: cover;
		width: 5000px;
		height: 80px;
		position: relative;
		padding: 0px;
		color: #333333;
		font-size: 24px;
	}

	.user-type-card {
		text-decoration: none;
		color: inherit;
	}

	.user-type-card:hover {
		color: inherit;
	}

	.user-type-text:hover {
		color: #f97316;
	}

	.card {
		padding: 16px;
		background: white;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.card:hover {
		transform: translateY(-5px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
	}

	.primary-btn {
		background: #2563eb;
		color: white;
		border-radius: 8px;
		padding: 10px 20px;
		font-weight: 500;
		transition: background 0.3s;
	}

	.primary-btn:hover {
		background: #1d4ed8;
	}

	.secondary-btn {
		background: #f97316;
		color: white;
		border-radius: 8px;
		padding: 10px 20px;
		font-weight: 500;
		transition: background 0.3s;
	}

	.secondary-btn:hover {
		background: #ea580c;
	}

	.status-badge {
		display: inline-block;
		padding: 4px 10px;
		border-radius: 20px;
		font-size: 0.85rem;
		font-weight: 500;
	}

	.badge-live {
		background: #dc2626;
		color: white;
	}

	.badge-upcoming {
		background: #2563eb;
		color: white;
	}

	.badge-completed {
		background: #16a34a;
		color: white;
	}

	.marquee-container {
		height: 40px;
		overflow: hidden;
		position: relative;
	}

	.marquee-content {
		position: absolute;
		white-space: nowrap;
		animation: marquee 20s linear infinite;
	}

	@keyframes marquee {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	.countdown-box {
		background: rgba(37, 99, 235, 0.1);
		border-radius: 8px;
		padding: 12px;
		text-align: center;
		font-weight: 700;
		font-size: 1.5rem;
		color: #2563eb;
	}

	.announcement-item {
		padding: 12px 0;
		border-bottom: 1px solid #eee;
	}

	.announcement-item:last-child {
		border-bottom: none;
	}

	.user-type-card {
		border: 2px solid transparent;
		border-radius: 8px;
		padding: 20px;
		text-align: center;
		transition: all 0.3s;
	}

	.user-type-card:hover {
		border-color: #2563eb;
		background: rgba(37, 99, 235, 0.05);
	}

	/* 桌面端底部样式优化 */
	footer {
		padding: 32px;
	}

	footer h2 {
		font-size: 1.125rem;
	}

	footer p {
		font-size: 1rem;
	}

	.notice-container {
		height: 200px;
		overflow-y: auto;
	}

	.notice-container::-webkit-scrollbar {
		width: 6px;
	}

	.notice-container::-webkit-scrollbar-thumb {
		background-color: #c0c0c0;
		border-radius: 3px;
	}

	.notice-container::-webkit-scrollbar-track {
		background-color: #f5f5f5;
	}
</style>